<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import {
  ElTag,
  ElIcon,
  ElDatePicker,
  ElTimeline,
  ElTimelineItem,
  ElCollapse,
  ElCollapseItem,
  ElDescriptions,
  ElDescriptionsItem,
  ElTabs,
  ElTabPane,
  ElButton
} from 'element-plus'
import { Cpu, FullScreen } from '@element-plus/icons-vue'
const infos = reactive({
  ip: '39.98.93.165',
  port: '8000'
})

const timer = ref([])

const logs = ref([
  {
    id: 1,
    timer: '2024.06.07',
    tags: ['组件更新', '网页标题更新'],
    protocol: 'tcp / http',
    code: 200,
    app: 'Microsoft IIS httpd',
    title: '金蝶云星空 管理中心',
    components: ['IIS:10.0', 'Microsoft-ASP.NET:4.0.30319', '金蝶云星空'],
    tabActive: '',
    isFullScren: false,
    tabs: [
      {
        name: 'Banner',
        data: `
        HTTP/1.1 200 OKXGPT解读
        Cache-Control: private
        Content-Type: text/html; charset=utf-8
        Server: Microsoff-lIS/1 0.0
        Set-Cookie: ASP.NET_Sessionld=mgfu430ga1 ezwoezcpdlbqq: path=/; HttpOnly; Same
        Site=Lax
        X-AspNet-Version: 4.0.30319
        X-Powered-By: ASP.NET
        Date: Tue, 04 Jun 2024 08:17:14 GMT
        Content-Lenqth: 7572
      `
      },
      { name: '网站正文', data: '' }
    ]
  },
  {
    id: 2,
    timer: '2024.06.01',
    tags: ['网页标题更新'],
    protocol: 'tcp / http',
    code: 200,
    app: 'MicrosoftIIShttpd',
    title: '金蝶云星空 管理中心',
    components: ['IIS:10.0', 'Micr0sof-ASP.NET:4.0.30319', '金蝶云星空'],
    tabActive: '',
    isFullScren: false,
    tabs: [
      {
        name: 'Banner',
        data: `
        HTTP/1.1 200 OKXGPT解读
        Cache-Control: private
        Content-Type: text/html; charset=utf-8
        Server: Microsoff-lIS/1 0.0
        Set-Cookie: ASP.NET_Sessionld=mgfu430ga1 ezwoezcpdlbqq: path=/; HttpOnly; Same
        Site=Lax
        X-AspNet-Version: 4.0.30319
        X-Powered-By: ASP.NET
        Date: Tue, 04 Jun 2024 08:17:14 GMT
        Content-Lenqth: 7572
      `
      },
      { name: '网站正文', data: '' }
    ]
  },
  {
    id: 3,
    timer: '2024.04.09',
    tags: ['组件更新', '网页标题更新'],
    protocol: 'tcp / http',
    code: 200,
    app: 'MicrosoftIIShttpd',
    title: '金蝶云星空 管理中心',
    components: ['IIS:10.0', 'Micr0sof-ASP.NET:4.0.30319', '金蝶云星空'],
    tabActive: '',
    isFullScren: false,
    tabs: [
      {
        name: 'Banner',
        data: `
        HTTP/1.1 200 OKXGPT解读
        Cache-Control: private
        Content-Type: text/html; charset=utf-8
        Server: Microsoff-lIS/1 0.0
        Set-Cookie: ASP.NET_Sessionld=mgfu430ga1 ezwoezcpdlbqq: path=/; HttpOnly; Same
        Site=Lax
        X-AspNet-Version: 4.0.30319
        X-Powered-By: ASP.NET
        Date: Tue, 04 Jun 2024 08:17:14 GMT
        Content-Lenqth: 7572
      `
      },
      { name: '网站正文', data: '' }
    ]
  }
])

const activeNames = ref([1])

onMounted(() => {
  logs.value.forEach((ele) => {
    if (ele.tabs.length) ele.tabActive = ele.tabs[0].name
  })
})

const changeDate = () => {}

const changeFullscreen = (item) => {
  logs.value.forEach((ele) => {
    if (ele.id === item.id) ele.isFullScren = !ele.isFullScren
  })
}

const xgpt = () => {}
</script>

<template>
  <div class="history-con">
    <div class="infos flex-items">
      <div class="ip">{{ infos.ip }}</div>
      <div class="port">
        <el-tag>
          <div class="flex-items">
            <el-icon><Cpu /></el-icon>
            <span>{{ infos.port }}</span>
          </div>
        </el-tag>
      </div>
    </div>
    <div class="log-length">
      <div>共{{ logs.length }}条变更记录</div>
      <div class="date-picker">
        <el-date-picker
          v-model="timer"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeDate"
        />
      </div>
    </div>
    <div class="log-container">
      <div class="describe">
        <el-timeline>
          <!-- 每条时间具体信息 -->
          <el-timeline-item hide-timestamp v-for="item in logs" :key="item.id">
            <el-collapse v-model="activeNames">
              <el-collapse-item :name="item.id">
                <template #title>
                  <span>{{ item.timer }}</span>
                  <el-tag
                    class="tags"
                    type="danger"
                    v-for="(item2, index) in item.tags"
                    :key="index"
                  >
                    {{ item2 }}
                  </el-tag>
                </template>
                <el-tag type="info">{{ item.protocol }}</el-tag>
                <!-- descriptions -->
                <el-descriptions :column="2" class="descriptions">
                  <el-descriptions-item label="响应头状态码：">
                    {{ item.code }}
                  </el-descriptions-item>
                  <el-descriptions-item label="应用：">{{ item.app }}</el-descriptions-item>
                  <el-descriptions-item label="网页标题：">
                    <span style="color: var(--el-color-danger)">{{ item.title }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="组件：">
                    <span style="color: var(--el-color-danger)">
                      {{ item.components.join('、') }}
                    </span>
                  </el-descriptions-item>
                </el-descriptions>
                <!-- pre -->
                <div class="view">
                  <div
                    class="fullScreenIcon"
                    :class="{ fullScreen: item.isFullScren }"
                    @click="changeFullscreen(item)"
                  >
                    <el-icon><FullScreen /></el-icon>
                  </div>
                  <el-tabs v-model="item.tabActive">
                    <el-tab-pane
                      :label="item3.name"
                      :name="item3.name"
                      v-for="(item3, index3) in item.tabs"
                      :key="index3"
                    >
                      <pre class="view-con">
                        <el-button @click="xgpt" round size="small" class="view-btn">XGPT解读</el-button>
                        {{ item3.data }}
                      </pre>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.flex-items {
  display: flex;
  align-items: center;
}
.port {
  margin-left: 0.625rem;
}
.log-length {
  position: relative;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  .date-picker {
    position: absolute;
    top: -0.375rem;
    right: 0;
  }
}
.log-container {
  .tags {
    margin-left: 0.3125rem;
  }
  .descriptions {
    margin-top: 0.625rem;
  }
  .view {
    position: relative;
    height: 18.75rem;
    border: var(--el-border);
    border-radius: 0.3125rem;
    overflow: hidden;
    .fullScreenIcon {
      position: absolute;
      top: 0.625rem;
      right: 0.625rem;
      cursor: pointer;
    }
    .view-con {
      height: 100%;
      overflow-y: auto;
      &::-webkit-scrollbar-track-piece {
        background-color: var(--el-fill-color-blank);
      }
      &::-webkit-scrollbar {
        width: 0.375rem;
        width: 0.375rem;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 1.25rem;
        background-color: var(--el-text-color-disabled);
      }
      .view-btn {
        position: absolute;
        top: 0%;
        right: 1.25rem;
      }
    }
  }
}
:deep(.el-tabs.el-tabs--top) {
  height: 100%;
  .el-tabs__content {
    height: calc(100% - 3.4375rem);
    .el-tab-pane {
      height: 100%;
    }
  }
  .el-tabs__header {
    .el-tabs__nav-wrap {
      padding: 0 0.625rem;
    }
  }
}
</style>
